<script setup lang="ts">
import { ref } from 'vue';
// 导入样式
import './index.css';
import ChannelNav from './components/ChannelNav.vue';
import ArticleList from './components/ArticleList.vue';

// 兄弟组件传值的中介，兄弟组件最近的父组件
const channelId = ref<number>(2);

// 接收子组件 ChannelNav 传递过来的，选中的，频道id
const changeChannelHandler = (id: number) => {
  console.log('子组件传递的id', id);
  channelId.value = id;
};
</script>

<template>
  <div class="xxx">xxx</div>
  <ChannelNav :channelId="channelId" @changeChannel="changeChannelHandler" />
  <ArticleList :channelId="channelId" />
</template>

<style scoped>
.xxx {
  position: relative;
}
.xxx::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid gold;
  animation: clippath 3s infinite linear;
}
@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 95% 0);
  }
  25% {
    clip-path: inset(0 95% 0 0);
  }
  50% {
    clip-path: inset(95% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 95%);
  }
}
</style>
